<template>
  <div class="newcarousel">
    <a-carousel
      dot-position="left"
      ref="carousel"
      :afterChange="afterChange"
    >
      <div v-for="item in imgs" :key="item" class="artTitle">
        <img :src="item" width="500" height="200" />
      </div>
    </a-carousel>
    <div
      style="width: 500px; height: 200px"
      @mouseleave="panelmouseleave"
      @mouseenter="panelmouseenter"
    >
      <a
        ><h3
          v-for="(item, index) in imgs"
          :key="item"
          :class="{ active: index == currentIndex }"
          @mouseenter="mouseenter(index)"
        >
          新闻标题：{{ index }}
        </h3></a
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      height: "600px",
      imgs: [
        "https://ts1.cn.mm.bing.net/th?id=OIP-C.FaG6dzohGs3q45-DwsEyQQHaEK&w=158&h=100&c=8&rs=1&qlt=90&o=6&dpr=2.25&pid=3.1&rm=2",
        "https://ts1.cn.mm.bing.net/th?id=OIP-C.ZTmNathhKflijArYDaQEDAHaEo&w=173&h=102&c=8&rs=1&qlt=90&o=6&dpr=2.25&pid=3.1&rm=2",
        "https://ts1.cn.mm.bing.net/th?id=OIP-C.jDcv2JKzvTces6Hfi9f8iAHaFj&w=163&h=106&c=8&rs=1&qlt=90&o=6&dpr=2.25&pid=3.1&rm=2",
      ],
      currentIndex: 0,
      autoplay: true,
      isMouseIn: false,
    };
  },
  mounted() {
    this.play();
  },
  methods: {
    afterChange(current) {
      if (!this.isMouseIn) {
        this.currentIndex = current;this.play()
      }
    },
    panelmouseenter() {
      this.autoplay = false;
      this.isMouseIn = true;
    },
    mouseenter(index) {
        this.currentIndex = index;
        this.$refs.carousel.goTo(index, true);
      
    },
    panelmouseleave() {
      this.autoplay = true;
      this.isMouseIn = false;
      this.play();
    },
    play() {
      setTimeout(() => {
        if (this.autoplay) {
          console.log(new Date())
          this.$refs.carousel.next();
        }
      }, 3000);
    },
  },
};
</script>
<style scoped>
.active {
  background: lightcoral;
}
</style>
